<template>
  <div class="my-stock-list">
    <div class="header">
      <h1>我的自选股</h1>
      <div class="search-bar">
        <el-input
          v-model="searchQuery"
          placeholder="搜索股票名称或代码"
          prefix-icon="el-icon-search"
          clearable
          @clear="handleSearch"
          @input="handleSearch"
        />
      </div>
    </div>

    <div class="content">
      <div class="toolbar">
        <div class="left">
          <el-button-group>
            <el-button size="small" @click="sortBy('change')">
              涨跌幅
              <i :class="['el-icon-sort', sortField === 'change' ? (sortOrder === 'asc' ? 'asc' : 'desc') : '']"></i>
            </el-button>
            <el-button size="small" @click="sortBy('price')">
              最新价
              <i :class="['el-icon-sort', sortField === 'price' ? (sortOrder === 'asc' ? 'asc' : 'desc') : '']"></i>
            </el-button>
          </el-button-group>
        </div>
        <div class="right">
          <el-button type="text" @click="refreshData">
            <i class="el-icon-refresh"></i> 刷新
          </el-button>
        </div>
      </div>

      <el-table
        :data="filteredStocks"
        style="width: 100%"
        :row-class-name="tableRowClassName"
        @row-click="handleRowClick"
      >
        <el-table-column prop="name" label="股票名称" min-width="120">
          <template slot-scope="scope">
            <div class="stock-name">
              <span>{{ scope.row.name }}</span>
              <span class="stock-code">{{ scope.row.code }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="最新价" width="120">
          <template slot-scope="scope">
            <span :class="['price', scope.row.change >= 0 ? 'up' : 'down']">
              {{ scope.row.price }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="change" label="涨跌幅" width="120">
          <template slot-scope="scope">
            <span :class="['change', scope.row.change >= 0 ? 'up' : 'down']">
              {{ scope.row.change >= 0 ? '+' : '' }}{{ scope.row.change }}%
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="volume" label="成交量" width="120">
          <template slot-scope="scope">
            {{ formatVolume(scope.row.volume) }}
          </template>
        </el-table-column>
        <el-table-column prop="amount" label="成交额" width="120">
          <template slot-scope="scope">
            {{ formatAmount(scope.row.amount) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click.stop="removeFromWatchList(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="empty-state" v-if="filteredStocks.length === 0">
        <el-empty description="暂无自选股">
          <el-button type="primary" @click="goToStockList">去添加自选股</el-button>
        </el-empty>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyStockList',
  data() {
    return {
      searchQuery: '',
      sortField: 'change',
      sortOrder: 'desc',
      stocks: [
        {
          name: '贵州茅台',
          code: '600519',
          price: '1,850.00',
          change: 2.34,
          volume: 123456,
          amount: 123456789
        },
        {
          name: '宁德时代',
          code: '300750',
          price: '420.50',
          change: 1.89,
          volume: 98765,
          amount: 98765432
        },
        {
          name: '中国平安',
          code: '601318',
          price: '45.67',
          change: -0.56,
          volume: 456789,
          amount: 456789123
        }
      ]
    }
  },
  computed: {
    filteredStocks() {
      let result = [...this.stocks]
      
      // 搜索过滤
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase()
        result = result.filter(stock => 
          stock.name.toLowerCase().includes(query) || 
          stock.code.includes(query)
        )
      }
      
      // 排序
      result.sort((a, b) => {
        const aValue = a[this.sortField]
        const bValue = b[this.sortField]
        return this.sortOrder === 'asc' ? aValue - bValue : bValue - aValue
      })
      
      return result
    }
  },
  methods: {
    handleSearch() {
      // 搜索逻辑已在计算属性中实现
    },
    sortBy(field) {
      if (this.sortField === field) {
        this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc'
      } else {
        this.sortField = field
        this.sortOrder = 'desc'
      }
    },
    refreshData() {
      // TODO: 实现数据刷新逻辑
      this.$message.success('数据已刷新')
    },
    handleRowClick(row) {
      this.$router.push(`/stock/${row.code}`)
    },
    removeFromWatchList(stock) {
      this.$confirm('确定要删除该自选股吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const index = this.stocks.findIndex(s => s.code === stock.code)
        if (index !== -1) {
          this.stocks.splice(index, 1)
          this.$message.success('已删除自选股')
        }
      }).catch(() => {})
    },
    goToStockList() {
      this.$router.push('/stock')
    },
    tableRowClassName({row}) {
      return row.change >= 0 ? 'up-row' : 'down-row'
    },
    formatVolume(volume) {
      if (volume >= 100000000) {
        return (volume / 100000000).toFixed(2) + '亿'
      } else if (volume >= 10000) {
        return (volume / 10000).toFixed(2) + '万'
      }
      return volume
    },
    formatAmount(amount) {
      if (amount >= 100000000) {
        return (amount / 100000000).toFixed(2) + '亿'
      } else if (amount >= 10000) {
        return (amount / 10000).toFixed(2) + '万'
      }
      return amount
    }
  }
}
</script>

<style scoped>
.my-stock-list {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px;
}

.header h1 {
  font-size: 24px;
  color: #303133;
  margin: 0;
}

.search-bar {
  width: 300px;
}

.content {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  padding: 20px;
  margin: 0 20px;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.stock-name {
  display: flex;
  flex-direction: column;
}

.stock-code {
  font-size: 12px;
  color: #909399;
}

.price, .change {
  font-weight: 500;
}

.price.up, .change.up {
  color: #f56c6c;
}

.price.down, .change.down {
  color: #67c23a;
}

.el-table .up-row {
  background-color: #fef0f0;
}

.el-table .down-row {
  background-color: #f0f9eb;
}

.empty-state {
  margin-top: 40px;
  text-align: center;
}

.el-icon-sort {
  margin-left: 4px;
}

.el-icon-sort.asc {
  transform: rotate(180deg);
}
</style> 